<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="user">
        <div class="userNav commenNav">
            <div>
                <div :class="{iconImg:isiconImg,iconImgs:isiconImgs}" @click="pillpage"></div>
                <div id="pillmanage">药品管理</div>
                <input type="button" value="新增药品" @click="addpill">
            </div>
            <div class="userNavT">
                <div>
                    <input type="text" placeholder="输入药品名称开始搜索" v-model="pillnameSearch" @keyup.enter='searchfn'>
                    <div @click="searchfn"><img :src="searchImg" alt=""></div>
                </div>
            </div>
        </div>
        <div class="userCotent">
            <div class="datails">
                <ul>
                    <li class="firstLi">
                        <div>序号</div>
                        <div>药品通用名称</div>
                        <div>本位码</div>
                        <div>最小包装单位</div>
                        <div>最小包装内置剂数量</div>
                        <div>制剂单位</div>
                        <div>包装级别</div>
                        <div>操作</div>
                    </li>
                    <li v-if="nullshow" class="nullContent">
                                                      暂时没有数据
                    </li>
                    <li v-else v-for="(pill,index) in pills" class="dataLi">
                        <div>{{index + 1}}</div>
                        <div @click="pillrecord(index)" :title="pill.drugName">{{pill.drugName}}</div>
                        <div title="pill.drugCode" :title="pill.drugCode">{{pill.drugCode}}</div>
                        <div>{{pill.minPackagingUnit}}</div>
                        <div>{{pill.minPackagingNumber}}</div>
                        <div>{{pill.specificationUnit}}</div>
                        <div>{{pill.packingLevel}}</div>
                        <div class="caozuo">
                            <span style="cursor: pointer" @click="pilledit(index)">修改</span>
                            <span style="cursor: pointer" @click="pillDel(index)">删除</span>
                        </div>
                    </li>
                </ul>
                <!--分页-->
                <div class="block" style="text-align: center;margin-top:50px;margin-bottom: 30px;" v-show="isPageshow">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                </div>

            </div>
        </div>
        <!--提示框-->
        <div id="tipMsg" v-show="istipMsg">
            <div class="approval-leave-bg">
                <div class="tipBox">
                    <div>
                        <p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
                    </div>
                    <div>
                        <p style="padding:40px 0;text-align: center;width:100%;">你确定要删除该信息吗？删除后将无法恢复。</p>
                        <div class="yesNo">
                            <input type="button" value="取消" id="yes" @click="cancle">
                            <input type="button" value="确定" id="no" @click="pillSure">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<component v-bind:is='whichComponents' keep-alive></component>-->
    </div>
</template>
<script>
    import { mapActions, mapState } from 'vuex'
    export default {
        name: 'user',
        data() {
            return {
                pageSize: 10,
                isPageshow: true,
                pills: [],
                pillnameSearch: '',
                total: 0,
                istipMsg: false,
                // whichComponents:'stockList',
                isiconImg: true,
                isiconImgs: false,
                currentPage: 1,
                nullshow: false,
                searchImg: '/static/img/搜索.png',
                searchImgs: '/static/img/搜索点击.png',
                users: [
                ],
                // loading: true,
                delId: '',
                editData: '',
                editId: '',
            }
        },
        filters: {

        },
        created: function () {
            this.getpill(1)
            this.getProduceAddresslist({
                id: sessionStorage.userId
            }).then((data) => {
                console.log(data, '动态获取生产地址')
                if (data.code == 200) {
                    sessionStorage.setItem('ProduceAddress', JSON.stringify(data.data))
                } else {
                    this.$message(data.message)
                }
            })
        },
        methods: {
            pillpage: function () {
                this.isiconImg = false
                this.isiconImgs = true
                document.querySelector("#pillmanage").style.color = '#666'
            },
            searchfn: function (i = 1) {
                this.searchImg = this.searchImgs
                this.currentPage = 1
                this.pillnameSearchlist({
                    pageSize: this.pageSize,
                    pageNo: this.currentPage,
                    jsonFilter: JSON.stringify({ "LIKE_drugName": this.pillnameSearch })
                }).then((data) => {
                    console.log(data, '查询')
                    if (data.code == 200) {
                        this.total = data.data.count
                        for (let i = 0; i < data.data.list.length; i++) {
                            if (data.data.list[i].specificationUnit == '1') {
                                data.data.list[i].specificationUnit = '片'
                            } else if (data.data.list[i].specificationUnit == '2') {
                                data.data.list[i].specificationUnit = '袋'
                            }
                            else if (data.data.list[i].specificationUnit == '3') {
                                data.data.list[i].specificationUnit = '粒'
                            }
                            else if (data.data.list[i].specificationUnit == '4') {
                                data.data.list[i].specificationUnit = '瓶'
                            }
                            else if (data.data.list[i].specificationUnit == '5') {
                                data.data.list[i].specificationUnit = '支'
                            }

                            if (data.data.list[i].minPackagingUnit == '1') {
                                data.data.list[i].minPackagingUnit = '盒'
                            } else if (data.data.list[i].minPackagingUnit == '2') {
                                data.data.list[i].minPackagingUnit = '袋'
                            }
                            else if (data.data.list[i].minPackagingUnit == '3') {
                                data.data.list[i].minPackagingUnit = '箱'
                            }
                        }
                        this.pills = data.data.list
                    } else {

                    }
                }).catch(msg => console.log(msg))
            },
            // 获取药品管理页面数据
            getpill(i = 1) {
                this.$store.commit('showLoading');
                this.getpilllist({
                    pageSize: this.pageSize,
                    pageNo: i,
                    jsonFilter: JSON.stringify({ "LIKE_drugName": this.pillnameSearch })
                }).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        if (data.data.list.length == 0) {
                            this.isPageshow = false
                            this.nullshow = true
                        }
                        this.total = data.data.count
                        for (let i = 0; i < data.data.list.length; i++) {
                            if (data.data.list[i].specificationUnit == '1') {
                                data.data.list[i].specificationUnit = '片'
                            } else if (data.data.list[i].specificationUnit == '2') {
                                data.data.list[i].specificationUnit = '袋'
                            }
                            else if (data.data.list[i].specificationUnit == '3') {
                                data.data.list[i].specificationUnit = '粒'
                            }
                            else if (data.data.list[i].specificationUnit == '4') {
                                data.data.list[i].specificationUnit = '瓶'
                            }
                            else if (data.data.list[i].specificationUnit == '5') {
                                data.data.list[i].specificationUnit = '支'
                            }

                            if (data.data.list[i].minPackagingUnit == '1') {
                                data.data.list[i].minPackagingUnit = '盒'
                            } else if (data.data.list[i].minPackagingUnit == '2') {
                                data.data.list[i].minPackagingUnit = '袋'
                            }
                            else if (data.data.list[i].minPackagingUnit == '3') {
                                data.data.list[i].minPackagingUnit = '箱'
                            }
                        }
                        this.pills = data.data.list
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg));
            },
            // 分页跳转
            handleSizeChange(val) {
                this.pageSize = val
                this.pillnameSearchlist({
                    pageSize: val,
                    pageNo: this.currentPage,
                    jsonFilter: JSON.stringify({ "LIKE_drugName": this.pillnameSearch })
                }).then((data) => {
                    console.log(data, '查询')
                    if (data.code == 200) {
                        this.total = data.data.count
                        for (let i = 0; i < data.data.list.length; i++) {
                            if (data.data.list[i].specificationUnit == '1') {
                                data.data.list[i].specificationUnit = '片'
                            } else if (data.data.list[i].specificationUnit == '2') {
                                data.data.list[i].specificationUnit = '袋'
                            }
                            else if (data.data.list[i].specificationUnit == '3') {
                                data.data.list[i].specificationUnit = '粒'
                            }
                            else if (data.data.list[i].specificationUnit == '4') {
                                data.data.list[i].specificationUnit = '瓶'
                            }
                            else if (data.data.list[i].specificationUnit == '5') {
                                data.data.list[i].specificationUnit = '支'
                            }

                            if (data.data.list[i].minPackagingUnit == '1') {
                                data.data.list[i].minPackagingUnit = '盒'
                            } else if (data.data.list[i].minPackagingUnit == '2') {
                                data.data.list[i].minPackagingUnit = '袋'
                            }
                            else if (data.data.list[i].minPackagingUnit == '3') {
                                data.data.list[i].minPackagingUnit = '箱'
                            }
                        }
                        this.pills = data.data.list
                    } else {

                    }
                }).catch(msg => console.log(msg))

            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getpill(this.currentPage)

            },
            addpill: function () {
                var url = '/home/addpill'
                this.$router.push({
                    path: url
                })
            },
            pillDel(index) {
                this.istipMsg = true
                this.delId = this.pills[index].id
            },
            cancle: function () {
                this.istipMsg = false
            },
            // 确定删除
            pillSure() {
                this.pillSurelist({
                    id: this.delId
                }).then((data) => {
                    console.log(data, '删除信息')
                    if (data.code == 200) {
                        this.cancle()
                        this.getpill(this.currentPage, this.pageSize)
                         this.$message.success('删除成功!')
                    } else if(data.code == '602'){
                        this.cancle()
                        this.$message('该药品已经被使用,不能删除!')
                    }else{
                        this.cancle()
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            pilledit(index) {
                this.editId = this.pills[index].id
                this.pilleditList({
                    id: this.editId
                }).then((data) => {
                    console.log(data, '修改记录数据')
                    if (data.code == 200) {
                        this.editData = data.data
                        let edata = JSON.stringify(this.editData)
                        sessionStorage.setItem('edata', edata)
                        // console.log(editData,'要编辑的数据')
                        var url = '/home/editpill'
                        this.$router.push({
                            path: url
                        })
                    }
                }).catch(msg => console.log(msg))

            },
            pillrecord(index) {
                this.editId = this.pills[index].id
                this.pilleditList({
                    id: this.editId
                }).then((data) => {
                    console.log(data, '修改记录数据')
                    if (data.code == 200) {
                        this.editData = data.data
                        let edata = JSON.stringify(this.editData)
                        sessionStorage.setItem('edata', edata)
                        // console.log(editData,'要编辑的数据')
                        var url = '/home/pillrecord'
                        this.$router.push({
                            path: url
                        })
                    }
                }).catch(msg => console.log(msg))

            },
            ...mapActions(['getpilllist','pillSurelist','pillnameSearchlist','getProduceAddresslist','pilleditList'])  
        },

    }

</script>
<style scoped>
    .userCotent {
        margin-top: 10px;
    }
    
    .userNav>div:nth-child(1) {
        height: 25px;
        display: flex;
        margin-left: 35px;
        align-items: center;
    }
    
    .userNav>div:nth-child(1) input {
        background: #43dce7;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        margin-left: 60px;
        width: 80px;
        height: 32px;
    }
    
    .userNav>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT {
        width: 360px;
        display: flex;
        align-items: center;
        margin-right: 45px;
    }
    
    .userNavT>div:nth-child(1) {
        display: flex;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        height: 34px;
        padding: 5px 10px;
        width: 360px;
        justify-content: space-between;
    }
    
    .userNavT>div:nth-child(1) input {
        border: none;
        outline: none;
        width: 100%;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) img {
        width: 20px;
        height: 20px;
        vertical-align: initial;
    }
    
    .userNavT>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) div span {
        padding: 0!important;
    }
    
    .userNavT>div:nth-child(2) {
        color: #888;
        font-size: 14px;
        cursor: pointer;
    }
    
    .user {
        position: relative;
    }
    
    .datails {
        border: 1px solid #dddddd;
        width: 100%;
        background: #fff;
        /*min-width: 1289px;*/
    }
    
    .datails>ul>li {
        display: flex;
        text-align: center;
    }
    
    .datails>ul>li div {
        border-bottom: 1px solid #F2F2F2;
        border-right: 1px solid #F2F2F2;
    }
    
    .firstLi div {
        border-bottom: 1px solid #DDD;
        border-right: 1px solid #DDD;
    }
    
    .firstLi {
        height: 40px;
        line-height: 40px;
    }
    
    .firstLi div {
        width: 170px;
        color: #999;
        font-size: 14px;
    }
    
    .firstLi div:nth-child(1) {
        width: 8.5%;
    }
    
    .firstLi div:nth-child(2) {
        width: 13.96%;
    }
    
    .firstLi div:nth-child(3) {
        width: 13.2%;
    }
    
    .firstLi div:nth-child(4) {
        width: 11%
    }
    
    .firstLi div:nth-child(5) {
        width: 16%
    }
    
    .firstLi div:nth-child(6) {
        width: 11%
    }
    
    .firstLi div:nth-child(7) {
        width: 11%
    }
    
    .firstLi div:nth-child(8) {
        width: 16%;
    }
    
    .dataLi {
        height: 56px;
        line-height: 56px;
        color: #333;
        font-size: 14px;
    }
    
    .dataLi div:nth-child(1) {
        width: 8.5%;
    }
    
    .dataLi div:nth-child(2) {
        width: 13.96%;
        padding: 0 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #35C885;
        cursor: pointer;
    }
    
    .dataLi div:nth-child(3) {
        width: 13.2%;
        padding: 0 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .dataLi div:nth-child(4) {
        width: 11%
    }
    
    .dataLi div:nth-child(5) {
        width: 16%
    }
    
    .dataLi div:nth-child(6) {
        width: 11%
    }
    
    .dataLi div:nth-child(7) {
        width: 11%
    }
    
    .dataLi div:nth-child(8) {
        width: 16%;
    }
    
    .nullContent {
        margin-top: 302px;
        color: #DDD;
        font-size: 20px;
        justify-content: center;
    }
    
    .caozuo span:nth-child(1) {
        color: #43dce7;
    }
    
    .caozuo span:nth-child(2) {
        color: #E74343;
        padding-left:60px;
    }
    
    .iconImg {
        background: url('/static/img/icons.png') no-repeat;
        width: 24px;
        height: 24px;
        background-position: -79px -39px;
    }
    
    .iconImgs {
        background: url('/static/img/icons.png') no-repeat;
        width: 24px;
        height: 24px;
        background-position: -108px -39px;
    }
</style>